<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <style type="text/css">
    /* 
  1.display:inline-block将变成行内元素，后面的不换行
  display:block;变成块级元素，后面换行
  2.flex-direction:决定主轴的方向。row(默认)|row-reverse|column|column-reverse
  3.justify-content:决定了主轴的对齐方式。flex-start|center|flex-end|space-bettwen|space-around|space-evenly
  4.align-items:决定在cross axis上对齐方式.flex-start|flex-end|center|normal|baseline|stretch(拉升)
  5.flex-wrap:nowrap/wrap/wrap-reverse
  6.align-content:决定交叉轴的对齐方式。flex-start|center|flex-end|space-bettwen|space-around|space-evenly
   */
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 550px;
      height: 300px;
      border: 1px solid #ccc;
      text-align: center;
      margin: 0 auto;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-evenly;
      /*  align-items: center;  */
      flex-wrap: wrap;
      align-content: space-evenly;
    }

    .wrap>.item {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    .wrap>.item:nth-child(1) {
      background-color: red;
    }

    .wrap>.item:nth-child(2) {
      background-color: pink;
    }

    .wrap>.item:nth-child(3) {
      background-color: blue;
    }

    .wrap>.item:nth-child(4) {
      background-color: purple;
    }

    .wrap>.item:nth-child(5) {
      background-color: purple;
    }

    .wrap>.item:nth-child(6) {
      background-color: purple;
    }

    .wrap>.item:nth-child(7) {
      background-color: purple;
    }

    .wrap>.item:nth-child(8) {
      background-color: purple;
    }
  </style>

  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>
    <strong>我不换行</strong>
  </body>

</html>